<template>
	 <div class="wrapper">
	            <!-- header部分 -->
	            <header>
	                <p>用户登录</p>
	            </header>
	            <!-- 表单部分 -->
	            <ul class="form-box">
	                <li>
	                    <div class="title">
	                        手机号码：
	                    </div>
	                    <div class="content">
	                        <input v-model="user.userId" type="text" placeholder="手机号码">
	                    </div>
	                </li>
	                <li>
	                    <div class="title">
	                        密码：
	                    </div>
	                    <div class="content">
	                        <input v-model="user.password" type="password" placeholder="密码">
	                    </div>
	                </li>
	            </ul>
	            <div class="button-login">
	                <button @click="login">登录</button>
	            </div>
	            <div class="button-register">
	                <button @click="jumpToRegister">去注册</button>
	            </div>
	            <Footer></Footer>
	        </div>    
</template>

<script>
	import Footer from '../components/Footer.vue';
	export default {
		name:'Login',
		components: {
			Footer
		},
		data:function(){
			return {
				user:{
					userId:'',
					password:''
				}
			}
		},
		created(){
			// 接受从注册页面传来的账号密码参数
			let user = this.$route.query.user;
			if(user!=null){
				this.user = user;
			}
		},
		methods:{
			// 跳转到注册页面
			jumpToRegister:function(){
				this.$router.push('/register');
			},

			// 登录
			login:function(){
				let that = this;
				let url = 'UserController/getUserByIdByPass';
				// console.log(this.user);
				this.$axios.post(url,this.$qs.stringify(that.user))
					.then(resp=>{
						let user = resp.data;
						// console.log(user);
						if(user!=null){
							that.$sessionSet(resp.data);
							that.$router.go(-1);
						}else{
							alert("用户名或密码错误");
						}
					})
					.catch(err=>{
						console.log(err);
					})
			}
		}
	}
	
</script>

<style scoped="scoped">
	/****************** 总容器 ******************/
	.wrapper{
	    width: 100%;
	    height: 100%;
	}
	/****************** header部分 ******************/
	.wrapper header{
	    width: 100%;
	    height: 12vw;
	    background-color: #0097FF;
	    color: #fff;
	    font-size: 4.8vw;
	    position: fixed;
	    left: 0;
	    top: 0;
	    z-index: 1000;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	/****************** 表单部分 ******************/
	.wrapper .form-box{
	    width: 100%;
	    margin-top: 12vw;
	}
	.wrapper .form-box li{
	    box-sizing: border-box;
	    padding: 4vw 3vw 0 3vw;
	    display: flex;
	    align-items: center;
	}
	.wrapper .form-box li .title{
	    flex: 0 0 18vw;
	    font-size: 3vw;
	    font-weight: 700;
	    color: #666;
	}
	.wrapper .form-box li .content{
	    flex: 1;
	}
	.wrapper .form-box li .content input{
	    border: none;
	    outline: none;
	    width: 100%;
	    height: 4vw;
	    font-size: 3vw;
	}
	.wrapper .button-login{
	    width: 100%;
	    box-sizing: border-box;
	    padding: 4vw 3vw 0 3vw;
	}
	.wrapper .button-login button{
	    width: 100%;
	    height: 10vw;
	    font-size: 3.8vw;
	    font-weight: 700;
	    color: #fff;
	    background-color: #38CA73;
	    border-radius: 4px;
	    border: none;
	    outline: none;
	}
	.wrapper .button-register{
	    width: 100%;
	    box-sizing: border-box;
	    padding: 4vw 3vw 0 3vw;
	}
	.wrapper .button-register button{
	    width: 100%;
	    height: 10vw;
	    font-size: 3.8vw;
	    font-weight: 700;
	    /*与上面登陆按钮不同的只有颜色、背景色、边框不同*/
	    color: #666;
	    background-color: #EEE;
	    border: solid 1px #DDD;
	    border-radius: 4px;
	    border: none;
	    outline: none;
	}
	
</style>
